<template>
  <div>
    <el-card>
      <div slot="header"
        :class="$style.header">
        <div :class="$style.search">
          <span>昵称：</span>
          <el-input v-model="name"
            clearable
            @clear="filterChange"></el-input>
        </div>
        <div :class="$style.search">
          <span>等级：</span>
          <el-input v-model="grade"
            clearable
            @clear="filterChange"></el-input>
        </div>
        <el-button type="primary"
          @click="filterChange">
          搜索<i class="el-icon-search"></i>
        </el-button>
      </div>

      <el-table :data="tableData"
        m-b-10>
        <el-table-column label="昵称">
          <template slot-scope="{ row }">
            {{row.parent_str}}
          </template>
        </el-table-column>
        <el-table-column label="用户头像"
        align="center">
          <template slot-scope="{ row }">
            <img width="100px" :src="row.picurl" >
          </template>
        </el-table-column>
        <el-table-column label="等级"
          align="center">
          <template slot-scope="{ row }">
            {{row.level}}
          </template>
        </el-table-column>
        <el-table-column label="状态"
          align="center">
          <template slot-scope="{ row }">
            {{row.status_str}}
          </template>
        </el-table-column>
        <el-table-column label="会员卡余额"
          align="center">
          <template slot-scope="{ row }">
            {{(parseFloat(row.amount)).toFixed(2)}}
          </template>
        </el-table-column>
        <el-table-column label="佣金余额"
          align="center">
          <template slot-scope="{ row }">
            {{(parseFloat(row.reward)).toFixed(2)}}
          </template>
        </el-table-column>
        <el-table-column label="冻结佣金余额"
          align="center">
          <template slot-scope="{ row }">
            {{(parseFloat(row.reward_ice)).toFixed(2)}}
          </template>
        </el-table-column>
        <el-table-column label="操作"
          align="center">
          <template slot-scope="{row}">
            <el-button size="mini"
              type="danger"
              @click="change(row.id)">切换状态</el-button>
          </template>
        </el-table-column>
      </el-table>

      <BasePagination :max="maxPage"
        :now.sync="nowPage"></BasePagination>
    </el-card>
  </div>
</template>

<script>
import BasePagination from '@/components/BasePagination'

export default {
  components: {
    BasePagination
  },

  data() {
    return {
      tableData: [
        {
          lable:'昵称',
          prop:'',
        },
        {
          lable:'用户头像',
          prop:'picurl',
        },
        {
          lable:'等级',
          prop:'level',
        },
        {
          lable:'状态',
          prop:'status',
        },
        {
          lable:'会员卡余额',
          prop:'amount',
        },
        {
          lable:'佣金余额',
          prop:'reward',
        },
        {
          lable:'会员卡余额',
          prop:'amount',
        },
        {
          lable:'冻结金余额',
          prop:'reward_ice',
        },
      ],
      search: '',
      select: '',
      date: [],
      maxPage: 1,
      nowPage: 1,
      name: '',
      grade:'',
    }
  },
  created(){
    this.getData();
  },
  watch: {
    nowPage() {
      this.getData()
    }
  },
  methods: {
    init(to, from) {
      this.getData()
    },
    filterChange() {},
    getData() {
      this.$http.get("/Manage/Member/lists",{
        params:{
          page:this.nowPage,
          rows:10,
          keywords:this.name,
          state:'',
          level:this.grade
        }
      })
      .then(res=>{
        if(res.code===1){
        this.tableData = res.data.list;
        }
      })
    },
    change(id){
      this.$confirm('是否要切换状态?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(()=>{
        this.$http.post('/Manage/Member/state',{
        id:id
        })
        .then(res=>{
          this.getData();
        })
      })
    },
    filterChange() {
      this.nowPage === 1 ? this.getData() : (this.nowPage = 1)
    },
    state(val) {
      if (val === 1) {
        return '已激活'
      } else if (val === 2) {
        return '未激活'
      }
    },
  }
}
</script>

<style lang="scss" module>
.header {
  display: flex;
  align-items: center;

  > div {
    flex-grow: 0;
    flex-shrink: 0;

    &:not(:last-child) {
      margin-right: 20px;
    }

    > span {
      margin-right: 5px;
    }
  }

  .search {
    display: flex;
    align-items: center;

    > div {
      width: 200px;
    }
  }

  [space] {
    flex-grow: 1;
  }
}
</style>
